import React, { useState, useEffect, useReducer } from 'react'
import { Route, Switch, Redirect, withRouter } from 'react-router-dom'
import { Layout, BackTop, message } from 'antd'
import routes from '@/routes'
import menus from './menu'
import '@/style/layout.scss'
import GlobalContext from './global.context'
import AppHeader from './AppHeader.jsx'
import AppAside from './AppAside.jsx'
import AppFooter from './AppFooter.jsx'
import { useRequest } from 'ahooks'
import { requestWrapper } from '@/utils/request'
import userAPI from '@/services/user'
const { Content } = Layout

const MENU_TOGGLE = 'menuToggle'

const reducer = (state, action) => {
    switch (action.type) {
        case MENU_TOGGLE:
            return { ...state, menuToggle: !state.menuToggle }
        default:
            return state
    }
}

const getMenu = menus => {
    let newMenu,
        role = JSON.parse(localStorage.getItem('myInfo')).role
    newMenu = menus.filter(res => res.role.indexOf(role) !== -1)
    console.log(role)
    console.log(newMenu)
    return newMenu
}

// const getMenu = props => {
//     const token = localStorage.getItem('accessToken')
//     if (token) {
//         return props
//     }
// }

const DefaultLayout = props => {
    const [me, setMe] = useState({})

    const [menu] = useState(prevState => {
        if (!localStorage.getItem('accessToken')) {
            props.history.push('/login')
            return []
        } else {
            setMe(JSON.parse(localStorage.getItem('myInfo')))
            return getMenu(menus)
        }
    })

    const [state, dispatch] = useReducer(reducer, { menuToggle: false })

    let { auth } = JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')) : ''

    const menuClick = () => {
        dispatch({ type: 'menuToggle' })
    }

    const loginOut = () => {
        localStorage.clear()
        props.history.push('/login')
        message.success('登出成功!')
    }

    const toSet = () => {
        props.history.push('/user/my/set')
    }
    // useEffect(() => {
    //     let { pathname } = props.location
    //     let timer

    //     // 菜单收缩展开时 echarts 图表的自适应
    //     if (pathname === '/' || pathname === '/index') {
    //         timer = setTimeout(() => {
    //             echarts.init(document.getElementById('bar')).resize()
    //             echarts.init(document.getElementById('line')).resize()
    //             echarts.init(document.getElementById('pie')).resize()
    //             // echarts.init(document.getElementById('pictorialBar')).resize()
    //             // echarts.init(document.getElementById('scatter')).resize()
    //         }, 500)
    //     } else {
    //         timer = null
    //     }
    //     return () => {
    //         timer && clearTimeout(timer)
    //     }
    // })

    return (
        <Layout className='app'>
            <GlobalContext.Provider value={{ me }}>
                <BackTop />
                <AppAside menuToggle={state.menuToggle} menu={menu} avatar={me.headImg} name={me.username} />
                <Layout style={{ marginLeft: state.menuToggle ? '80px' : '200px', minHeight: '100vh' }}>
                    <AppHeader
                        menuToggle={state.menuToggle}
                        menuClick={menuClick}
                        avatar={me.headImg}
                        loginOut={loginOut}
                    />
                    <Content className='content'>
                        <Switch>
                            {routes.map(item => {
                                return (
                                    <Route
                                        key={item.path}
                                        path={item.path}
                                        exact={item.exact}
                                        render={props =>
                                            !auth ? (
                                                <item.component {...props} />
                                            ) : item.auth && item.auth.indexOf(auth) !== -1 ? (
                                                <item.component {...props} />
                                            ) : (
                                                // 这里也可以跳转到 403 页面
                                                <Redirect to='/404' {...props} />
                                            )
                                        }></Route>
                                )
                            })}
                            <Redirect to='/404' />
                        </Switch>
                    </Content>
                    <AppFooter />
                </Layout>
            </GlobalContext.Provider>
        </Layout>
    )
}

export default withRouter(DefaultLayout)
